<template>
	<view class="">
		<view class="cksl_top">
			总账户流水
			<view class="return" @click="ruturn_fn()"></view>
		</view>
		<view class="cksl_date" type="primary" @click="query_fn()">
			<view :style='{"display":show}'>选择查询日期</view>
			{{newRange}}
			<image src="/static/date_triangle.png" mode="heightFix"></image>
		</view>
		<view class="cksl_alert" :style='{"display":look}'>
			<view class="alert_children">
				<view class="alert_text">
					查询日期
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
				</view>
				<hr>
				<button class="alert_button1" @click="determine_fn();query_fn() ">确定</button>
				<button class="alert_button2" @click="reset_fn()">重置</button>
			</view>
		</view>
		<view class="turnove-top" :style='{"display":see}'>
			<view class="turnove-block">
				<view class="turnove-num1 turnove-num">{{rk_total}}</view>
				<view class="turnove-text">入库金额</view>
			</view>
			<view class="turnove-block">
				<view class="turnove-num2 turnove-num">{{ck_total}}</view>
				<view class="turnove-text">出库金额</view>
			</view>
			<view class="turnove-block">
				<view class="turnove-num3 turnove-num">{{kc_total}}</view>
				<view class="turnove-text">库存金额</view>
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt" :style='{"display":see1}'>
			<uni-segmented-control :current="current" :values="items" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content" :style='{"display":see1}'>
			<view v-if="current === 0">
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in rk_list" :key="index">
						<view class="odo_center">
							<view class="odo_centerLeft">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_price}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
							<view class="odo_centerRight">
								<view class="odo_centerRight1" :style='{"background-color":ruColor}'>
									入库
								</view>
								<view class="odo_centerRight2" :style='{"color":ruColor}'>
									-{{item.hp_num*item.hp_price}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								供应商姓名：{{item.supplier_name}}

							</view>
							<view class="odo_bottomRight">
								入库时间:{{item.hp_sj_time}}
							</view>
						</view>
					</view>
					<view class="odo_list" v-for="(item,index) in ck_list" >
						<view class="odo_center">
							<view class="odo_centerLeft">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_price}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
							<view class="odo_centerRight">
								<view class="odo_centerRight1" :style='{"background-color":ckColor}'>
									出库
								</view>
								<view class="odo_centerRight2" :style='{"color":ckColor}'>
									+{{item.hp_num*item.hp_price}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								开单人：{{item.staff_name}}
							</view>
							<view class="odo_bottomRight">
								出库时间:{{item.hp_ck_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in rk_list" :key="index">
						<view class="odo_center">
							<view class="odo_centerLeft">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_price}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
							<view class="odo_centerRight">
								<view class="odo_centerRight1" :style='{"background-color":ruColor}'>
									入库
								</view>
								<view class="odo_centerRight2" :style='{"color":ruColor}'>
									-{{item.hp_num*item.hp_price}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								供应商姓名：{{item.supplier_name}}

							</view>
							<view class="odo_bottomRight">
								入库时间:{{item.hp_sj_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 2">
				<view class="odo">
					<view class="odo_list" v-for="(item,index) in ck_list" :key="index">
						<view class="odo_center">
							<view class="odo_centerLeft">
								<view class="">
									货品名称：{{item.hp_name}}
								</view>
								<view class="">
									货品编号：{{item.hp_price}}
								</view>
								<view class="">
									货品颜色：{{item.hp_color}}
								</view>
								<view class="">
									货品尺码：{{item.hp_size}}
								</view>
								<view class="">
									入库数量：{{item.hp_num}}
								</view>
							</view>
							<view class="odo_centerRight">
								<view class="odo_centerRight1" :style='{"background-color":ckColor}'>
									出库
								</view>
								<view class="odo_centerRight2" :style='{"color":ckColor}'>
									+{{item.hp_num*item.hp_price}}
								</view>
							</view>
						</view>
						<view class="odo_bottom">
							<view class="odo_bottomLeft">
								开单人：{{item.staff_name}}
							</view>
							<view class="odo_bottomRight">
								出库时间:{{item.hp_ck_time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			


		</view>
		<view class="content1" :style='{"display":watch}'>
			<view class="turnove-top">
				<view class="turnove-block">
					<view class="turnove-num1 turnove-num">{{range_rk_total}}</view>
					<view class="turnove-text">入库金额</view>
				</view>
				<view class="turnove-block">
					<view class="turnove-num2 turnove-num">{{range_ck_total}}</view>
					<view class="turnove-text">出库金额</view>
				</view>
				<view class="turnove-block">
					<view class="turnove-num3 turnove-num">{{range_kc_total}}</view>
					<view class="turnove-text">库存金额</view>
				</view>
			</view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :active-color="activeColor"
					@clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<view class="odo">
						<view class="odo_list" v-for="(item,index) in range_rk_list" :key="index">
							<view class="odo_center">
								<view class="odo_centerLeft">
									<view class="">
										货品名称：{{item.hp_name}}
									</view>
									<view class="">
										货品编号：{{item.hp_price}}
									</view>
									<view class="">
										货品颜色：{{item.hp_color}}
									</view>
									<view class="">
										货品尺码：{{item.hp_size}}
									</view>
									<view class="">
										入库数量：{{item.hp_num}}
									</view>
								</view>
								<view class="odo_centerRight">
									<view class="odo_centerRight1" :style='{"background-color":ruColor}'>
										入库
									</view>
									<view class="odo_centerRight2" :style='{"color":ruColor}'>
										-{{item.hp_num*item.hp_price}}
									</view>
								</view>
							</view>
							<view class="odo_bottom">
								<view class="odo_bottomLeft">
									供应商姓名：{{item.supplier_name}}
		
								</view>
								<view class="odo_bottomRight">
									入库时间:{{item.hp_sj_time}}
								</view>
							</view>
						</view>
						<view class="odo_list" v-for="(item,index) in range_ck_list" >
							<view class="odo_center">
								<view class="odo_centerLeft">
									<view class="">
										货品名称：{{item.hp_name}}
									</view>
									<view class="">
										货品编号：{{item.hp_price}}
									</view>
									<view class="">
										货品颜色：{{item.hp_color}}
									</view>
									<view class="">
										货品尺码：{{item.hp_size}}
									</view>
									<view class="">
										入库数量：{{item.hp_num}}
									</view>
								</view>
								<view class="odo_centerRight">
									<view class="odo_centerRight1" :style='{"background-color":ckColor}'>
										出库
									</view>
									<view class="odo_centerRight2" :style='{"color":ckColor}'>
										+{{item.hp_num*item.hp_price}}
									</view>
								</view>
							</view>
							<view class="odo_bottom">
								<view class="odo_bottomLeft">
									开单人：{{item.staff_name}}
								</view>
								<view class="odo_bottomRight">
									出库时间:{{item.hp_ck_time}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="odo">
						<view class="odo_list" v-for="(item,index) in range_rk_list" :key="index">
							<view class="odo_center">
								<view class="odo_centerLeft">
									<view class="">
										货品名称：{{item.hp_name}}
									</view>
									<view class="">
										货品编号：{{item.hp_price}}
									</view>
									<view class="">
										货品颜色：{{item.hp_color}}
									</view>
									<view class="">
										货品尺码：{{item.hp_size}}
									</view>
									<view class="">
										入库数量：{{item.hp_num}}
									</view>
								</view>
								<view class="odo_centerRight">
									<view class="odo_centerRight1" :style='{"background-color":ruColor}'>
										入库
									</view>
									<view class="odo_centerRight2" :style='{"color":ruColor}'>
										-{{item.hp_num*item.hp_price}}
									</view>
								</view>
							</view>
							<view class="odo_bottom">
								<view class="odo_bottomLeft">
									供应商姓名：{{item.supplier_name}}
		
								</view>
								<view class="odo_bottomRight">
									入库时间:{{item.hp_sj_time}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="odo">
						<view class="odo_list" v-for="(item,index) in range_ck_list" :key="index">
							<view class="odo_center">
								<view class="odo_centerLeft">
									<view class="">
										货品名称：{{item.hp_name}}
									</view>
									<view class="">
										货品编号：{{item.hp_price}}
									</view>
									<view class="">
										货品颜色：{{item.hp_color}}
									</view>
									<view class="">
										货品尺码：{{item.hp_size}}
									</view>
									<view class="">
										入库数量：{{item.hp_num}}
									</view>
								</view>
								<view class="odo_centerRight">
									<view class="odo_centerRight1" :style='{"background-color":ckColor}'>
										出库
									</view>
									<view class="odo_centerRight2" :style='{"color":ckColor}'>
										+{{item.hp_num*item.hp_price}}
									</view>
								</view>
							</view>
							<view class="odo_bottom">
								<view class="odo_bottomLeft">
									开单人：{{item.staff_name}}
								</view>
								<view class="odo_bottomRight">
									出库时间:{{item.hp_ck_time}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['全部', '总入库', '总出库'],
				current: 0,
				activeColor: '#fccc04',
				range: '',
				newRange: '',
				look: 'none',
				show: 'inline-block',
				see: 'flex',
				see1: 'block',
				watch: 'none',
				ckColor: "#33c98c",
				ruColor: "#f94803",
				rk_list: [],
				ck_list: [],
				range_rk_list: [],
				range_ck_list: [],
			}
		},
		methods: {
			onLoad() {
				uni.getSystemInfo({
					success: (res) => {
						res.screenHeight
						this.phone_height = (res.screenHeight * (750 / res.windowWidth))
					}
				})
			},
			query_fn() {
				if (this.look == 'none') {
					this.look = 'block'
				} else {
					this.look = 'none'
				}
			},
			determine_fn() {
				if (this.range == '') {
					this.show = 'inline-block'
					this.see = 'flex'
					this.watch = 'none'
					this.see1 = 'block'
				} else {
					this.show = 'none'
					this.see = 'none'
					this.see1 = 'none'
					this.watch = 'block'
					this.newRange = this.range[0] + '-' + this.range[1]
					uni.request({
						url: "http://localhost:3000/range_rk",
						data: {
							small_Date: this.range[0],
							big_Date: this.range[1]
						},
						success: (res) => {
							this.range_rk_list = res.data.data
						},
					})
					uni.request({
						url: "http://localhost:3000/range_ck",
						data: {
							small_Date: this.range[0],
							big_Date: this.range[1]
						},
						success: (res) => {
							this.range_ck_list = res.data.data
						},
					})
				}
			},
			reset_fn() {
				this.range = ''
				this.newRange = ''
			},
			ruturn_fn() {
				uni.navigateTo({
					url: '/pages/hptj/hptj'
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		},
		created() {
			uni.request({
				url: "http://localhost:3000/rk_information",
				success: (res) => {
					this.rk_list = res.data.data
				},
			})
			uni.request({
				url: "http://localhost:3000/ck_information",
				success: (res) => {
					this.ck_list = res.data.data
				},
			})
		},
		computed: {
			rk_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.rk_list.length; i++) {
					a = a + parseInt(this.rk_list[i].hp_num * this.rk_list[i].hp_price)
				}
				return a.toFixed(2)
			},
			ck_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.ck_list.length; i++) {
					a = a + parseInt(this.ck_list[i].hp_num * this.ck_list[i].hp_price)
				}
				return a.toFixed(2)
			},
			kc_total: function() {
				var a = parseInt("0")
				a = this.rk_total - this.ck_total
				return a.toFixed(2)
			},
			range_rk_total:function(){
				var a = parseInt("0")
				for (var i = 0; i < this.range_rk_list.length; i++) {
					a = a + parseInt(this.range_rk_list[i].hp_num * this.range_rk_list[i].hp_price)
				}
				return a.toFixed(2)
			},
			range_ck_total: function() {
				var a = parseInt("0")
				for (var i = 0; i < this.range_ck_list.length; i++) {
					a = a + parseInt(this.range_ck_list[i].hp_num * this.range_ck_list[i].hp_price)
				}
				return a.toFixed(2)
			},
			range_kc_total: function() {
				var a = parseInt("0")
				a = this.range_rk_total - this.range_ck_total
				return a.toFixed(2)
			},
		}

	}
</script>

<style>
	.cksl_top {
		height: 250rpx;
		width: 100%;
		background-color: #fccc04;
		line-height: 200rpx;
		text-align: center;
		font-size: 38rpx;
		position: relative;
	}

	.return {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: rgb(0, 0, 0);
		font-size: 60rpx;
		font-weight: 100;
	}

	.cksl_date {
		position: absolute;
		right: 40rpx;
		top: 180rpx;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.cksl_date image {
		height: 20rpx;
		margin-left: 20rpx;
	}

	.cksl_alert {
		background-color: rgba(0, 0, 0, 0.3);
		width: 100%;
		position: fixed;
		z-index: 1;
		height: calc(100vh - 250rpx);
	}

	.alert_children {
		background-color: #fff;
		height: 300rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.alert_children hr {
		margin-top: 20rpx;
		background-color: #f3f3f3;
		height: 2px;
		border: none;

	}

	.alert_children button {
		display: inline-block;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.alert_button1 {
		right: 230rpx;
		background-color: #fcec03;
	}

	.alert_button2 {
		right: 30rpx;
		background-color: #a4a4a4;
		color: #e8e8e8;
	}

	.alert_text {
		margin-left: 30rpx;
	}

	.turnove-top {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		display: flex;
	}

	.turnove-block {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
	}

	.turnove-num {
		margin-top: 60rpx;
	}

	.turnove-text {
		font-size: 32rpx;
	}

	.turnove-num1 {
		color: #f94803;
	}

	.turnove-num2 {
		color: #33c98c;
	}

	.uni-common-mt {
		margin-top: 10px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 10px;
	}

	.content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		/* justify-content: center; */
		align-items: center;
		text-align: center;
	}

	.odo {
		background-color: white;
		margin: auto;
		margin-top: 20rpx;
		position: relative;
		width: 94%;
	}

	.odo_center {
		height: 300rpx;
		border-bottom: 5rpx dotted #eee;
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		/* float: left; */
	}

	.odo_centerLeft {
		width: 60%;
		float: left;
		line-height: 50rpx;
		font-size: 35rpx;
		color: #494848;
		padding-top: 10rpx;
		text-align: left;
	}

	.odo_centerRight {
		width: 40%;
		float: left;
		position: relative;
	}

	.odo_centerRight1 {
		width: 100rpx;
		height: 50rpx;
		background-color: #f94803;
		color: white;
		border-radius: 8rpx;
		position: absolute;
		right: 60rpx;
		top: 80rpx;
	}

	.odo_centerRight2 {
		color: #f94803;
		position: absolute;
		right: 80rpx;
		top: 160rpx;
		font-size: 38rpx;
	}

	.odo_bottom {
		display: flex;
		width: 100%;
		line-height: 100rpx;
		font-size: 36rpx;
		text-align: left;
	}

	.odo_bottomLeft {
		flex: 1;
	}

	.odo_bottomRight {
		flex: 1;
	}
</style>
